Event.observe ( window, 'load', bootstrap );

function bootstrap () {
  TableKit.options.editAjaxURI = '/rest/user';
  
  table_kit_select_input_as_boolean ( $w( 'authorization_owner authorization_writer authorization_follower' ) );
  
  Event.observe ( 'specification', 'change', specification_changed  );
  Event.observe ( 'user',          'change', user_changed           );
  
  $( 'refresh_page' ).observe ( 'click', refresh_page );
  
  var parameter = window.location.search.toQueryParams ();
  
  if ( parameter['id'] ) {
    $( 'specification' ).value = parameter['id'];
    
    refresh_page ();
  }
}

function refresh_page () {
  display_specifications ();
}

function specification_changed () {
  display_specifications ();
}

function display_specifications () {
  var specification = $( 'specification' ).value;
  
  var button_ids = $w( 'refresh_page user' );
  
  if ( specification != '' ) {
    new Ajax.Request ( '/rest/specification/' + specification + '/users', {
      method         : 'get',
      requestHeaders : { Accept : 'application/json' },
      onComplete     : function ( transport ) {
        var users = transport.responseJSON;

        var html =
          "<table id=\"users_table\" class=\"users sortable editable\">\n"
        + "  <thead>\n"
        + "    <tr>\n"
        + "      <th id=\"user_id\"                class=\"noedit\">ID</th>\n"
        + "      <th id=\"authorization_owner\"    class=\"\"      >Owner</th>\n"
        + "      <th id=\"authorization_writer\"   class=\"\"      >Writer</th>\n"
        + "      <th id=\"authorization_follower\" class=\"\"      >Follower</th>\n"
        + "    </tr>\n"
        + "  </thead>\n"
        + "  <tfoot>\n"
        + "    <tr>\n"
        + "      <th                                               >ID</th>\n"
        + "      <th                                               >Owner</th>\n"
        + "      <th                                               >Writer</th>\n"
        + "      <th                                               >Follower</th>\n"
        + "    </tr>\n"
        + "  </tfoot>\n"
        + "  <tbody>\n"
        ;

        var i = 1;

        users.each ( function ( h ) {
          html = html
          + "    <tr class=\"" + ( i % 2 ? "odd" : "even" ) + "\" id=\"user_id_" + h.id + "__specification_id_" + specification +"\">\n"
          + "      <td title=\"" + h.id + "\">" +   h.name                      + "</td>\n"
          + "      <td>"                        + ( h.owner    ? 'yes' : 'no' ) + "</td>\n"
          + "      <td>"                        + ( h.writer   ? 'yes' : 'no' ) + "</td>\n"
          + "      <td>"                        + ( h.follower ? 'yes' : 'no' ) + "</td>\n"
          + "    </tr>\n"
          ;
          
          i = i + 1;
        } );

        html = html
        + "  </tbody>\n"
        + "</table>\n"
        ;

        if ( users.length > 0 ) {
          $( 'users_table' ).replace ( html );
          
          TableKit.Sortable.init ( 'users_table' );
          TableKit.reload ();
        }
        else {
          $( 'users_table' ).replace ( '<div id="users_table"></div>' );
        }

        button_ids.each ( function ( id ) { enable ( id ) } );
      }
    } );
  }
  else {
    $( 'users_table' ).replace ( '<div id="users_table"></div>' );

    button_ids.each ( function ( id ) { disable ( id ) } );
  }
}

function user_changed () {
  var specification = $( 'specification' ).value;
  var user          = $( 'user' ).value;
  
  if ( user != '' && specification != '' ) {
    new Ajax.Request ( '/rest/user/' + user + '/specification/' + specification, {
      method         : 'put',
      requestHeaders : { Accept : 'application/json' },
      onComplete     : function () {
        display_specifications ();
      }
    } );
  }
}
